<template>
  <div class="container">
    <div class="back-btn" @click="back()"></div>
    <div class="scene-title">医院</div>
    <div
      class="scene-image"
    >
      <img :draggable="false" src="../assets/images/sence/hospital/bg.png" alt="">
      <div
        :class="['pad']"
        @dragenter="handleDragEnter"
        @dragleave="handleDragleave"
        @dragexit="handleDragexit"
      >
        <div class="tips" v-if="targetStatus === 'success'">
          <img src="../assets/images/sence/hospital/tip.png" alt="">
        </div>
        <img :draggable="false" v-if="targetStatus === 'active'" src="../assets/images/sence/hospital/pad-active.png" alt="">
        <img :draggable="false" v-else-if="targetStatus === 'enter'" src="../assets/images/sence/hospital/pad-start.png" alt="">
        <img :draggable="false" v-else-if="targetStatus === 'error'" src="../assets/images/sence/hospital/pad-error.png" alt="">
        <img :draggable="false" v-else-if="targetStatus === 'success'" src="../assets/images/sence/hospital/pad-run.png" alt="">
        <img :draggable="false" v-else src="../assets/images/sence/hospital/pad-default.png" alt="">
        <div class="qr-scanner" v-if="targetStatus === 'success'">
          <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chip" v-if="targetStatus !== 'success'">
      <div class="chip-item" @dragstart="(e) => handleDragstart(e, 910)" @dragend="(e) => handleDragend(e, 910)">
        <img class="draggable" :draggable="isStart === null" v-if="active910" src="../assets/images/common/910-active.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="success910" src="../assets/images/common/910-success.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="error910" src="../assets/images/common/910-error.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else src="../assets/images/common/910-default.png" alt="">
      </div>
      <div class="chip-item" @dragstart="(e) => handleDragstart(e, 310)" @dragend="(e) => handleDragend(e, 310)">
        <img class="draggable" :draggable="isStart === null" v-if="active310" src="../assets/images/common/310-active.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="success310" src="../assets/images/common/310-success.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="error310" src="../assets/images/common/310-error.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else src="../assets/images/common/310-default.png" alt="">
      </div>
    </div>
<!--    <div class="chip-tips" v-if="targetStatus !== 'success'">把芯片拖动到对应的边缘设备</div>-->
    <div class="run-tip success" v-if="targetStatus === 'success'">成功运行~</div>
    <div class="run-tip error" v-if="targetStatus === 'error'">{{ rightChip === 310 ? 910 : 310 }}芯片不适合边缘计算！</div>
    <div class="run-success" v-if="targetStatus === 'success'">
      <div class="left">
        <div class="arrow img-box">
          <img :draggable="false" src="../assets/images/common/temp-up.png" alt="">
        </div>
        <div class="temp img-box">
          <div class="temp-up-box">
            <div class="aa"></div>
            <div class="bb"></div>
          </div>
          <img :draggable="false" src="../assets/images/common/temp-em.png" alt="">
        </div>
      </div>
      <div class="right">
        <div class="chart-box">
          <div class="chart">
            <!--            <div class="chart-bg">-->
            <!--              <img src="../assets/images/common/chart-bg.png" alt="">-->
            <!--            </div>-->
            <div class="chart-line">
              <img :draggable="false" src="../assets/images/common/chart.png" alt="">
            </div>
          </div>
          <p>数据吞吐量 单位：MB</p>
        </div>
        <div class="img-box right-arrow">
          <img :draggable="false" src="../assets/images/common/temp-up.png" alt="">
        </div>
      </div>
    </div>
    <div class="run-error"></div>
    <van-popup style="width: 100%; display: flex; justify-content: center" v-model="showTips" :overlay="false">
      <p class="success-tip" v-if="targetStatus === 'success'">成功运行</p>
      <p class="error-tip" v-else>{{ rightChip === 310 ? 910 : 310 }}芯片不适合边缘计算！</p>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'Hospital',
  components: {},
  data() {
    return {
      rightChip: 310,
      isStart: null,
      current: null,
      active310: false,
      error310: false,
      success310: false,
      active910: false,
      error910: false,
      success910: false,
      targetStatus: 'default',
      toTarget: false,
      showTips: false,
      isBack: false
      // activeTarget: false,
      // enterTarget: false,
      // successTarget: false,
      // errorTarget: false,
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    if (this.$store.getters.hospital === true) {
      this.toTarget = true
      this.isStart = true
      this.handleDragend(null, this.rightChip)
    }
    if (this.$store.getters.hospital === false) {
      this.toTarget = true
      this.isStart = false
      this.handleDragend(null, this.rightChip)
    }
  },
  methods: {
    changeBack() {
      this.isBack = false
      setTimeout(() => {
        this.isBack = true
      }, 7500)
    },
    handleDragEnter(e) {
      console.log(e, 'enter')
      this.toTarget = true
      this.isStart = this.current === this.rightChip
      this['success' + this.current] = this.isStart
      this['error' + this.current] = !(this.isStart)
      this.targetStatus = 'enter'
      e.preventDefault()
    },
    handleDragstart(e, name) {
      const sibName = name === 310 ? 910 : 310
      this['active' + sibName] = false
      this['error' + sibName] = false
      this['success' + sibName] = false
      this.current = name
      this['active' + name] = true
      this.targetStatus = 'active'
      console.log(e, 'dragstart', name)
    },
    handleDragend(e, name) {
      if (!this.toTarget) {
        this.isStart = null
        this.current = null
        this.active310 = false
        this.error310 = false
        this.success310 = false
        this.active910 = false
        this.error910 = false
        this.success910 = false
        this.targetStatus = 'default'
        this.toTarget = false
        this.showTips = false
        this.isBack = false
        return
      }
      this.current = null
      this['active' + name] = false
      this.targetStatus = this.isStart ? 'success' : 'error'
      this.$store.dispatch('app/setHospitalStatus', this.isStart)
      if (this.isStart) {
        setTimeout(() => {
          this.isBack = true
        }, 7500)
      } else {
        setTimeout(() => {
          this.isStart = null
          this.current = null
          this.active310 = false
          this.error310 = false
          this.success310 = false
          this.active910 = false
          this.error910 = false
          this.success910 = false
          this.targetStatus = 'default'
          this.toTarget = false
          this.showTips = false
          this.isBack = false
        }, 2000)
      }

      // this.showTips = true
      // setTimeout(() => {
      //   this.showTips = false
      // }, 3000)
      console.log(e, 'dragend', name)
    },
    handleDragleave(e) {
      if (!this.toTarget || !['success', 'error'].includes(this.targetStatus) ) return
      const dom = document.querySelector('.dnd-poly-drag-image')
      // console.log(dom, 'ddddd')
      if (dom) {
        dom.style.display = 'none'
      }
      console.log(e, 'dragleave')
    },
    handleDragexit(e) {
      console.log(e, 'handleDragexit')
      this.toTarget = false
    },
    back() {
      this.$router.push({
        name: 'Home'
      })
    },
  },
  beforeDestroy() {
    // 全局存状态后，再次进来后的逻辑
    // const animationDom = document.getElementById('robot')
    // console.log(animationDom, 'animationDom')
    // animationDom.removeEventListener('animationiteration', this.changeBack);
  },
}
</script>

<style scoped lang="less">
:root {
  --container-width: 400px; /*组件宽度*/
  --container-height: 300px; /*组件高度*/
  --angle-size: 100px; /*四角边框效果尺寸*/
  --angle-weight: 4px; /*四角边框粗细，数值越小越粗*/
  --angle-color: rgb(138, 227, 249);
  --scan-wake-size: 60px; /*扫描拖光的长度*/
  --scan-wake-color: #6fb8d8;/*扫描拖光颜色*/
}
@keyframes scan {
  0% {
    /*最开始块从顶部往下移动，块的位置需要溢出容器，处于容器顶部上方，块的背景颜色从底部到顶部由绿色逐渐透明*/
    margin-top: calc(0px - var(--scan-wake-size));
    background:linear-gradient(#0000 0%, var(--scan-wake-color) 100%);
  }
  49% {
    /*动画进行到一半时间时，块必须移动到容器底部并溢出，完成从上到下扫描效果*/
    margin-top: var(--container-height);
    background:linear-gradient(#0000 0%, var(--scan-wake-color) 100%);
  }
  50% {
    /*调转颜色方向，准备往回扫（从下往上）*/
    margin-top: var(--container-height);
    background:linear-gradient(var(--scan-wake-color) 0%, #0000 100%);
  }
  100% {
    /*往回扫*/
    margin-top: calc(0px - var(--scan-wake-size));
    background:linear-gradient(var(--scan-wake-color) 0%, #0000 100%);
  }
}
/* 定义动画 */
@keyframes moving {
  0% {
    transform: translate(0, 0);
  }
  50% {
    //animation-timing-function: step-end;
    transform: translate(130px, 75px); /* 斜线路径 */
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 应用动画到元素 */
.run {
  //animation: bling 0s ease-in-out forwards;
  //animation-iteration-count: infinite;
  animation-name: moving;
  animation-duration: 15s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  //animation-iteration-count: 1;
  animation-direction: normal;
  //animation-timing-function: step-end;
  animation-timing-function: linear;
  //animation-timing-function: cubic-bezier(1, 1, 1, 1);
  animation-fill-mode: none;
  //animation-play-state: paused;
  //animation-fill-mode: forwards;
}

.scene-image {
  .pad {
    position: absolute;
    //bottom: 36%;
    //left: 10%;
    width: 116px;
    bottom: 29%;
    left: 56.5%;

    img {
      width: 100%;
      height: auto;
    }

    .tips {
      position: absolute;
      width: 80px;
      top: 0;
      transform: translate(41%, -45%); /* 斜线路径 */
      z-index: 2;
    }

    //bottom: 30%;
    //left: 18%;
    //background-image: url("../assets/images/sence/robot-default.png");
    //background-repeat: no-repeat;
    //background-position: center;
    //background-size: contain;
  }

}

</style>
<style>
.qr-scanner {
  position: absolute;
  width: 40px;
  top: 58px;
  left: 33px;
  //transform: rotate(10deg); /* 顺时针旋转45度 */
  transform: skew(-1deg, 29deg); /* 水平倾斜30度，垂直倾斜20度 */
}
.qr-scanner .box {
  width: 40px;
  height: 48px;
  //left: 50%;
  //top: 50%;
  //transform: translate(-50%, -50%);
  overflow: hidden;
  border: 1px solid #71edeb;
  //border: 1px solid rgba(0, 255, 51, 0.2);
}

.qr-scanner .line {
  width: 40px;
  height: 48px;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #71edeb 211%);
  border-bottom: 1px solid #71edeb;
  transform: translateY(-100%);
  animation: radar-beam 1.5s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 0.5s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;

  border: 2px solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #63fcf9;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #63fcf9;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #63fcf9;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #63fcf9;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(30%);
  }
}
</style>
